<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用函数</title>
    <!-- 一般引入js文件，都是在 head 标签内部 -->
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">
        .inner{
            background-color: aqua;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>

    <div style="background-color: red;" id="outer">
        <ul id="inner">
            <li>tomcat</li>
            <li>jboss</li>
            <li>jetty</li>
        </ul>
    </div>

    <button type="button" >修改DOM元素</button>
    <script type="text/javascript">
        let newNode = $("<li>我是新增的元素</li>") ;
        $(function(){
            // 选择要绑定事件的元素 ， 并添加事件
            $("button[type=button]").click( function(){
                $("#inner").append( newNode ) ;
            }) ;
        }) ;

        /**
         *  总结 ：
         *      一般都是将 事件 函数 放在 $() 中，表示页面加载完成之后就进行了事件绑定。
         *      形式 ：
         *          jQuery实例.事件方法( 具体的执行动作 )
         *
         */
    </script>

</body>
</html>